<template>
  <ul class="todo-list">
    <todo-item v-for="(row, index) in list" :key="index" :item="row" @delete="deleteHandler(row, index)">
      <template v-slot:subTitle>
        <slot name="subTitle" :row="row" :index="index"/>
      </template>
    </todo-item>
  </ul>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import TodoItem from './TodoItem.vue'
import { TodoItemData } from './types'

@Component({
  name: 'TodoList',
  components: {
    TodoItem,
  },
})
export default class TodoList extends Vue {
  @Prop({ default: [] }) public list!: TodoItemData[]

  public deleteHandler(row: TodoItemData, index: number) {
    this.$emit('delete', row, index)
  }

  created() {
    console.log('')
    console.log('TodoList 组件 created')
  }

  beforeMount() {
    console.log('')
    console.log('TodoList 组件 beforeMount')
  }

  mounted() {
    console.log('')
    console.log('TodoList 组件 mounted')
  }

  beforeUpdate() {
    console.log('')
    console.log('TodoList 组件 beforeUpdate')
  }

  updated() {
    console.log('')
    console.log('TodoList 组件 updated')
  }

  beforeDestroy() {
    console.log('')
    console.log('TodoList 组件 beforeDestroy')
  }

  activated() {
    console.log('')
    console.log('TodoList 组件 activated')
  }

  deactivated() {
    console.log('')
    console.log('TodoList 组件 deactivated')
  }
}
</script>

<style>
  .todo-list{
    width: 200px;
    margin: 20px auto;
    text-align: left;
  }
</style>
